<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5语义标签示例</title>
    <style>
        body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; }
        header, nav, main, section, article, aside, footer { padding: 20px; margin: 0; }
        header { background-color: #333; color: white; }
        nav { background-color: #f4f4f4; border-bottom: 1px solid #ddd; }
        nav ul { list-style: none; padding: 0; display: flex; gap: 20px; }
        nav a { text-decoration: none; color: #333; }
        .container { max-width: 1200px; margin: 0 auto; display: flex; gap: 20px; }
        main { flex: 3; }
        aside { flex: 1; background-color: #f9f9f9; border-left: 1px solid #ddd; }
        footer { background-color: #333; color: white; text-align: center; margin-top: 20px; }
        article { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
        h1, h2, h3 { margin-top: 0; }
    </style>
</head>
<body>
    <header>
        <h1>我的技术博客</h1>
        <p>分享前端开发的知识和经验</p>
    </header>
    
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">关于我</a></li>
        </ul>
    </nav>
    
    <div class="container">
        <main>
            <section>
                <h2>HTML5 教程</h2>
                
                <article>
                    <h3>HTML5语义标签的使用</h3>
                    <p>发布日期：2023年10月1日</p>
                    <p>HTML5引入了一系列语义标签，如header、nav、main、article等，这些标签不仅使代码结构更清晰，也有助于搜索引擎优化和无障碍访问...</p>
                    <a href="#">阅读更多</a>
                </article>
                
                <article>
                    <h3>Canvas绘图基础</h3>
                    <p>发布日期：2023年9月25日</p>
                    <p>Canvas是HTML5提供的绘图API，可用于在网页上绘制图形、动画和游戏。本文将介绍Canvas的基本用法和常见绘图技巧...</p>
                    <a href="#">阅读更多</a>
                </article>
            </section>
            
            <section>
                <h2>CSS3 技巧</h2>
                <article>
                    <h3>Flexbox布局完全指南</h3>
                    <p>发布日期：2023年9月20日</p>
                    <p>Flexbox是CSS3引入的弹性布局模型，简化了复杂布局的实现。本文将详细介绍Flexbox的各种属性和使用场景...</p>
                    <a href="#">阅读更多</a>
                </article>
            </section>
        </main>
        
        <aside>
            <h3>关于博客</h3>
            <p>这是一个专注于前端开发的技术博客，分享HTML、CSS、JavaScript等相关知识。</p>
            
            <h3>热门文章</h3>
            <ul>
                <li><a href="#">JavaScript异步编程详解</a></li>
                <li><a href="#">响应式设计最佳实践</a></li>
                <li><a href="#">CSS Grid布局教程</a></li>
            </ul>
            
            <h3>订阅博客</h3>
            <form>
                <input type="email" placeholder="输入您的邮箱" required>
                <button type="submit">订阅</button>
            </form>
        </aside>
    </div>
    
    <footer>
        <p>&copy; 2023 我的技术博客 - 保留所有权利</p>
        <p>联系方式：contact@example.com</p>
    </footer>
</body>
</html>
